<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>易经八卦</title>
    <style>
        [v-clock] {
            display: none;
        }

        html,
        body,
        p {
            padding: 0;
            margin: 0;
        }

        body {
            height: 100vh;
            background: url('./img/head.jpg') repeat-y;
            background-size: cover;
            background-color: #C39B6A;

            color: #252221;
            font: 16px "宋体", "Arial Narrow", HELVETICA;
        }

        .title {
            text-align: center;
            line-height: 50px;
            font-size: 26px;
            color: #61452c;
        }

        /* 骰子样式 */
        .box {
            width: 300px;
            height: 280px;
            margin: 0 auto;
            position: relative;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .pic {
            margin: 10px 10px;
            width: 60px;
            height: 60px;
        }

        img {
            width: 100%;
            height: 100%;
        }

        #btn {
            display: block;
            width: 160px;
            height: 40px;
            margin: 0 auto;
            color: #fff;
            border-radius: 8px;
            font-size: 16px;
            background-color: #61452c;
            cursor: pointer;
        }

        /* 骰子 */
        .today-luck-content {
            position: relative;
            width: 96%;
            margin: 20px auto;
            margin-top: 60px;
            min-height: 40vh;
            font-size: 20px;
            color: #333;
            background: url('./img/jz.jpg') no-repeat;
            background-size: 100% 100%;
            text-align: center;
        }

        .yi-con {
            padding: 3.13vw 3.91vw 3.13vw 16.15vw;
        }

        .yi-des {
            font-size: 22px;
            padding: 8px 0 6px 0;
        }

        .yi-con .yi-con-tit {
            font-size: 26px;
            padding: 8px 0 6px 0;
        }

        @media screen and (max-width: 414px) {
            .today-luck-content {
                background: none;
            }

            .yi-con {
                padding: 0;
            }
        }
    </style>
</head>

<body>
    <div id="app">
    </div>
</body>
<script src="./js/yi.js"></script>
<script src="./js/zy.js"></script>
<script src="./js/zb.js"></script>
<script src="./js/vue.runtime.min.js"></script>
<script>
    let t = null
    const touZhi = [
        './img/1-point.png',
        './img/2-point.png',
        './img/3-point.png',
        './img/4-point.png',
        './img/5-point.png',
        './img/6-point.png'
    ]

    const zy = new ZY()
    new Vue({
        el: '#app',
        render(h) {
            return h('div', {}, [
                h('header', {}, ['', h('div', { class: 'title' }, ['===易经算命==='])]),
                h('div', { class: 'box' }, [
                    this.touZhi.map(item => {
                        return h('div', { class: 'pic' }, [
                            h('img', { attrs: { src: item.src } }, [])
                        ])
                    })
                ]),
                h('button', { attrs: { id: 'btn' }, on: { click: this.shakeIt } }, [this.shakeText]),
                h('div', { class: 'today-luck-content' }, [
                    this.zhanbu ? h('div', { class: 'yi-con', domProps: { innerHTML: this.zhanbu } }, []) :
                        h('div', { class: 'yi-con' }, [
                            h('p', { domProps: { innerHTML: this.octant.gua } }),
                            h('p', { class: 'yi-con-tit' }, ['===六爻===']),
                            h('p', { domProps: { innerHTML: this.octant.sixyao } }),
                            h('p', { class: 'yi-con-tit' }, ['===彖辞===']),
                            h('p', { domProps: { innerHTML: this.octant.outtuan } }),
                            h('p', { class: 'yi-con-tit' }, ['===象传===']),
                            h('p', { domProps: { innerHTML: this.octant.outxiang } }),
                        ])
                ])
            ])
        },
        data() {
            return {
                touZhi: touZhi.map((i, _) => { return { src: i, num: _ } }),

                shakeText: '算一卦',
                shakeState: 0,

                resultArr: [],
                octant: {},
                zhanbu: ''
            }
        },
        methods: {
            getRandom() {
                return Math.floor(Math.random() * 6)
            },
            shuffle(arr) {
                return arr.sort(() => Math.random() - 0.5);
            },
            createSixNums() {
                return Array(6)
                    .fill()
                    .map((_, i) => {
                        let r = this.getRandom()
                        return { src: touZhi[r], num: r }
                    })
            },
            shakeIt() {
                if (this.shakeState === 0) {

                    this.shakeText = '停止';
                    this.shakeState = 1

                    t = setInterval(() => {
                        this.touZhi = this.createSixNums()
                    }, 50)
                } else {

                    clearInterval(t)
                    this.shakeText = '算一卦';
                    this.shakeState = 0
                    this.getZY()
                }
            },
            getZY() {

                let v1 = this.touZhi.slice(0, 3).reduce(function(prev, curr, idx, arr) {
                    return +(String(prev) + String(curr.num + 1));
                }, '');
                let v2 = this.touZhi.slice(-3).reduce(function(prev, curr, idx, arr) {
                    return +(String(prev) + String(curr.num + 1));
                }, '');

                let reply = zy.ZhouyiEx(zy.ZYindex(v1, v2))
                let gua = zy.outGua(reply)
                let sixyao = zy.sixyao(reply)
                let outtuan = zy.outtuan(reply)
                let outxiang = zy.outxiang(reply)
                this.zhanbu = ''
                this.octant = { gua, sixyao, outtuan, outxiang }
            },
            ZB() {
                const zb = new ZhanBu(zy)
                const { gnum, bgnum, byao, bgua } = zb.qigua()
                const result = zb.jiegua(gnum, bgnum, byao, bgua)

                this.zhanbu = `<p class="yi-con-tit">今日占卜</p>` + result.split(/\n|\r/).map(i => i && `<p class="yi-des">${i}</p>`).join('')
            }
        },
        created() {
            this.ZB()
        },
    })

</script>

</html>